<template>
  <div class="container">
    <scroll-view :scroll-y="true" :style="{'height': '100%'}" @scroll="scroll">
      <div class="top">
        <button class="cashButton" @click="to_cashOut">去提现</button>
        <!-- 可消费积分 -->
        <div class="point">
          <p class="p1">总积分</p>
          <p class="p2">{{list.total_credit}}</p>
          <p class="p3">「含未发放积分{{list.await_credit}}」</p>
        </div>
        <div class="total">
          <div class="left">
            <p class="title">
              现金积分
              <img
                src="https://h5.ameimeika.com/mp_images/mp_2.4/tishi-icon-xiao/tishi@2x.png"
                class="bookimg"
                @click="tips"
              />
            </p>
            <p class="num">{{list.extract_credit}}</p>
          </div>
          <div class="right middle">
            <p class="title">购物积分</p>
            <p class="num">{{list.no_coin}}</p>
          </div>
          <div class="right">
            <p class="title">活动积分</p>
            <p class="num">{{list.credit}}</p>
          </div>
        </div>
      </div>
      <ul>
        <li class="row">
          <a href="/pages/package_mine/plus_speed/main">我的补贴单</a>
          <span class="speed_btn">PLUS补贴单提速</span>
          <img
            src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
            alt
            class="icon_right"
          />
        </li>
        <li class="row">
          <a href="/pages/package_mine/point_detail/main">积分明细</a>
          <img
            src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
            alt
            class="icon_right"
          />
        </li>
        <li class="row">
          <a href="/pages/package_mine/my_card_new/main">我的银行卡</a>
          <img
            src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
            alt
            class="icon_right"
          />
        </li>
      </ul>
      <div class="banner" v-if="list.wallet_pics.length>0">
        <swiper
          :indicator-dots="false"
          :autoplay="true"
          :interval="2000"
          :duration="500"
          indicator-color="rgba(255, 255,255,.5)"
          indicator-active-color="rgba(255, 255,255,1)"
        >
          <block v-for="(item, index) in list.wallet_pics" :key="index">
            <swiper-item @click="to_detail(item)">
              <img v-if="imgUrl&&item.image" :src="imgUrl+item.image" class="slide-image" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="tip1">
        <div v-html="list.wallet_note"></div>
      </div>
      <div class="ismask" v-if="ismask"></div>
      <div class="isPopup" v-if="isPopup">
        <img :src="adlist" alt class="popimg" mode="widthFix"  @click="to_detail(popData)" />
        <div class="closeBtn" @click="closeBtn">×</div>
      </div>
    </scroll-view>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data() {
    return {
      imgUrl: "https://img.ameimeika.com/",
      ImgBaseUrl: "https://h5.ameimeika.com/mp_images/",
      list: "",
      coin: 0,
      total_already_credit: 0 ,//累计提现
      adlist:'',
      ismask:false,
      isPopup:false,
      popData:''
    };
  },
  methods: {
    getData() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      let position_data;
      if (wx.getStorageSync("province_info")) {
        position_data = JSON.parse(wx.getStorageSync("province_info"));
      }
      // console.log(position_data);
      common.fly_post(
        "/api/v4_2/user_wallet/index",
        {
          province_id: position_data.province_id
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.status_code == 0) {
            this.list = res.data;
            this.coin = res.data.extract_credit;
            this.total_already_credit = res.data.total_already_credit;
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.message,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        }
      );
    },
    // 去提现
    to_cashOut() {
      let that = this;
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/signedXB.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0) {
            switch (res.data) {
              case 0:
                // 未签约
                wx.showModal({
                  title: "", //提示的标题,
                  content: "提现需进行进行税务代缴协议签约，是否确定进行签约？", //提示的内容,
                  showCancel: true, //是否显示取消按钮,
                  cancelText: "取消", //取消按钮的文字，默认为取消，最多 4 个字符,
                  cancelColor: "#000000", //取消按钮的文字颜色,
                  confirmText: "确定", //确定按钮的文字，默认为取消，最多 4 个字符,
                  confirmColor: "#F64665", //确定按钮的文字颜色,
                  success: res => {
                    if (res.confirm) {
                      console.log("用户点击确定  去签约");
                      that.to_sign();
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                    }
                  }
                });
                break;
              case 1:
                // 已签约
                //跳转到提现页
                wx.navigateTo({
                  url: "/pages/package_mine/cash_out/main?coin_num=" + this.coin
                });
                break;

              default:
                break;
            }
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
            return false;
          }
        },
        "isJava"
      );
    },
    // 判断是否签约跳转h5
    to_sign() {
      wx.showLoading({
        title: "加载中",
        mask: true
      });
      common.fly_post(
        "/api/com.mmk.member.api.OpenUserWithdrawalsProvider/1.0.0/signAccount.html",
        {
          id: wx.getStorageSync("user_id") || 0
        },
        msg => {
          wx.hideLoading();
          let res = msg.data;
          if (res.code == 0 || res.code == 1007) {
            let ident_url =
              "https://h5.ameimeika.com/Identification/index.html";
            wx.navigateTo({
              url: `/pages/package_mine/sign_contract/main?url=${ident_url}`
            });
          } else {
            wx.hideLoading();
            wx.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
              mask: true
            });
          }

          //   switch (res.code) {
          //     case 0:
          //       let protocal_url = encodeURIComponent(`https://integration.esign.xinshuiguanjia.com/?accountId=${res.data}`)
          //       console.log(protocal_url);
          //       wx.navigateTo({ url: `/pages/advertisement/main?url=${protocal_url}` });
          //       break;
          //     case 1007:
          //       let ident_url = 'https://h5.ameimeika.com/Identification/index.html'
          //       wx.navigateTo({ url: `/pages/sign_contract/main?url=${ident_url}` });
          //       break;

          //     default:

          //       wx.hideLoading();
          //       wx.showToast({
          //         title: res.msg,
          //         icon: "none",
          //         duration: 2000,
          //         mask: true
          //       });
          //       break;
          //   }
        },
        "isJava"
      );
    },
    tips() {
      let that = this;
      wx.showModal({
        title: "",
        content: "已累计提现：¥ " + that.total_already_credit,
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E"
      });
    },
    prompt() {
      wx.showModal({
        title: "",
        content: "含有活动积分、补贴积分 ",
        showCancel: false,
        confirmText: "我知道了",
        confirmColor: "#FF383E",
        success: function(res) {
          if (res.confirm) {
          }
        }
      });
    },
    scroll() {},
    //轮播图跳转
    to_detail(item) {
      //轮播图跳详情页
      console.log('---284')
      common.to_detail(item);
    },
    getpop_advert(){
      common.mmk_Loading(0);
         common.fly_post(
        "/api/v4_2/wallet_index/pop_advert",'',
        msg => {
          common.mmk_Loading(1);
          let res = msg.data;
          if (res.status_code == 0 && res.data[0]) {

            this.adlist =this.imgUrl+ res.data[0].image
            console.log(this.adlist+'--295')
            this.popData =res.data[0]
            // this.adlist= 'https://mmkapp.oss-cn-beijing.aliyuncs.com/h5_images/mp_images/right.png'
            console.log(this.adlist)
            if(this.adlist){
              this.isPopup = true;
              this.ismask = true;
            }else{
              this.isPopup = false;
              this.ismask = false;
            }
          } else {
            common.mmk_Loading(2,res.msg);
          }
        }
      );
    },
    closeBtn(){
      this.ismask = false;
      this.isPopup = false;
    }
  },

  onLoad() {
    wx.setNavigationBarTitle({
      title: "钱包"
    });
    this.getData();
    this.getpop_advert()
    // this.ismask = true;
    // this.isPopup = true;
  },
  onShow() {

    this.getData(); 
    // this.getpop_advert()
     this.ismask = false;
    this.isPopup = false;
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f3f4f6;
  position: relative;
  .top {
    width: 100%;
    height: 310px;
    padding-top: 20px;
    box-sizing: border-box;
    background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/qianbao/beijing@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    position: relative;
    .cashButton {
      width: 70px;
      height: 22px;
      border-radius: 11px;
      background: #fff;
      font-size: 14px;
      color: #ff383e;
      line-height: 22px;
      text-align: center;
      position: absolute;
      right: 14px;
      top: 20px;
    }
    .point {
      width: 175px;
      height: 175px;
      text-align: center;
      background-image: url("https://img.ameimeika.com/h5_images/mp_images/mp_2.9/wallet_circle@3x.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 auto 20px;
      box-sizing: border-box;
      padding-top: 40px;
      .p1 {
        font-size: 17px;
        color: rgba(255, 255, 255, 1);
        line-height: 24px;
        .bookimg {
          width: 13px;
          height: 13px;
          display: inline-block;
        }
      }
      .p2 {
        display: inline-block;
        height: 40px;
        width: 100%;
        font-size: 40px;
        color: #fff;
        line-height: 40px;
        margin-bottom: 2px;
        text-shadow: 0px 3px 4px rgba(241, 8, 53, 1);
      }
      .p3 {
        display: inline-block;
        width: 49%;
        height: auto;
        font-size: 12px;
        color: #fff;
        // background: blue;
      }
    }
    .total {
      width: 100%;
      height: 50px;
      display: flex;
      text-align: center;
      color: #fff;
      .left {
        position: relative;
        flex: 1;
        .title {
          font-size: 14px;
          .bookimg {
            width: 13px;
            height: 13px;
            display: inline-block;
          }
        }
        .num {
          font-size: 20px;
          margin-top: 5px;
        }
        &::before {
          content: "";
          width: 1px;
          height: 30px;
          background-color: #fff;
          position: absolute;
          top: 15px;
          right: 1px;
        }
      }
      .right {
        flex: 1;
        &.middle {
          position: relative;
          &::before {
            content: "";
            width: 1px;
            height: 30px;
            background-color: #fff;
            position: absolute;
            top: 15px;
            right: 1px;
          }
        }
        .title {
          font-size: 14px;
        }
        .num {
          font-size: 20px;
          margin-top: 5px;
        }
      }
    }
  }
  .banner {
    height: 130px;
    width: 100%;
    position: relative;
    swiper {
      height: 100%;
    }
    .slide-image {
      width: 100%;
      height: 100%;
    }
  }
}
.ismask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 10;
}
.isPopup {
  width: 80%;
  height: 100%;
  position: absolute;
  top: 19%;
  left: 10%;
  z-index: 99;
  .popimg{
    width: 100%;
    min-height: 1px;
    margin-bottom: 100px;
  }
  .closeBtn{
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    // position: absolute;
    // bottom: -50px;
    // left: 49%;
    // background: red;
    border-radius: 50%;
    font-size: 12px;
    border:1px solid #fff ;
    color: #fff;
    margin: 0 auto;

  }
}
// .popimg{
//   width: 80%;
//   position: absolute;
//    top: 19%;
//   left: 10%;
//   z-index: 99;
// }

.text6 {
  width: 100%;
  height: 17px;
  box-sizing: border-box;
  line-height: 17px;
  font-size: 12px;
  color: #888;
  background-color: #fff;
  /* padding: 0 15px */
  margin: 15px 0px;
}
.icon_right {
  width: 18px;
  height: 20px;
  display: inline-block;
  position: absolute;
  right: 2.5%;
  top: 27.2%;
}
.speed_btn {
  width: 84px;
  text-align: center;
  position: absolute;
  right: 8%;
  top: 27.2%;
  font-size: 10px;
  font-weight: 500;
  height: 22px;
  color: rgba(255, 56, 62, 1);
  line-height: 22px;
  background: rgba(255, 56, 62, 0.12);
  border-radius: 11px;
}

.row {
  height: 44px;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 15px;
  line-height: 44px;
  color: #444;
  font-weight: 700;
  background-color: #fff;
  position: relative;
}
.row:nth-of-type(1) {
  border-bottom: 1px solid #f3f4f6;
}
.tip1 {
  width: 92%;
  height: auto;
  box-sizing: border-box;
  padding: 15px 0;
  line-height: 21px;
  margin: 0 auto;
}
.tip {
  box-sizing: border-box;
  padding: 0 15px;
  font-size: 12px;
  line-height: 17px;
  color: #999;
}
.tip2 {
  margin-bottom: 40px;
}
</style>

